<template>
  <div class="customer">
    <div class="mains">
      <div class="img">
        <img src="../assets/img/phone.png" alt="" />
        <span>联系电话</span>
      </div>
      <h1>400-820-8286</h1>
      <button @click="callPhone">联系客服</button>
      <div class="time">营业时间工作时间9:00~20:30周末9:30~18:00</div>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
import FooterNav from "../components/FooterNav.vue";
export default {
  components: { FooterNav },
  methods: {
    callPhone() {
      // console.log(this);
      this.$dialog
        .confirm({
          title: "即将离开app打开电话",
        }) .catch((data) => {
    // on cancel
    if (data) {
      this.$toast("已取消")
      }else{
      this.$toast("正在打开")
    }
  });
        // .then((data,rejct) => {
        //  console.log(data,rejct);
        // });
    },
  },
};
</script>

<style lang="scss" scoped>
.customer {
  padding-top: 15px;
  .mains {
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 6px rgb(0 0 0 / 20%);
    margin: 0 15px 20px;
    padding-top: 120px;
    border-radius: 3px;
    padding-bottom: 20px;
    .img {
      font-size: 24px;
      color: #333;
      display: flex;
      align-items: center;
      img {
        width: 45px;
        height: 45px;
        margin-right: 10px;
      }
    }
    h1 {
      margin-top: 20px;
      font-size: 24px;
    }
    button {
      width: 293.73px;
      height: 54.97px;
      color: #fff;
      font-size: 18px;
      background-color: #80d7d1;
      border: none;
      border-radius: 5px;
      margin-top: 115px;
    }
    .time {
      color: #999;
      margin-top: 100px;
    }
  }
}
</style>